<template>
	<div>
		<!-- 中间的主体部分 -->
		<form name="loginform">
			<div class="input-group" style="margin-top: 10px">
			  <span class="input-group-addon">邮&nbsp;箱</span>
			  <input type="text" class="form-control" placeholder="Email" v-model="email" @blur="setEmail()">
			</div>
			<div class="input-group" style="margin-top: 10px">
			  <span class="input-group-addon">用户名</span>
			  <input type="text" class="form-control" placeholder="UserName" v-model="username" @blur="setUsername()">
			</div>
			<a class="btn btn-primary" id="upload" style="cursor: default;" v-on:click="uploadFile()">上传</a>
			<a href="javascript:;" class="file">
			    <input type="file" name="file" id="myfile" multiple="multiple">点击这里上传文件
			</a>
			<span id="filenameShow"></span>
			<div class="input-group" style="margin-top: 10px">
			  <span class="input-group-addon">密&nbsp;码</span>
			  <input type="password" class="form-control" placeholder="Password" v-model="password" @blur="setPassword()">
			</div>
			<div class="input-group" style="margin-top: 30px">
				<a class="btn btn-info" v-on:click="registerPre()" style="width: 200px;margin-left: 53px;">下一步</a>
			</div>
		</form>
			<!-- 进度条 -->
		<div class="progress" style="display: none;">
  			<div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" ></div>
		</div>
	</div>
</template>

<script type="text/javascript" src="js/ajaxfileupload/ajaxfileupload.js"></script>
<script>
	Register.registerPre = function() {
		return {
			data: function() {
				return {
					"email": store.state.login.email,
					"password": store.state.login.password,
					"username": store.state.login.username 
				}
			},
			beforeRouteEnter: function(to, from, next) {
				console.log("login beforeRouteEnter. to: " + to);
				next(function(vm) {
					console.log(vm.$route);
				})
			},
			created: function() {
				console.log("login created.");
				/* $('#fileupload').fileupload({
					url: 'file',
					done: function (e, data) {
						toastr.info("file upload " + data);
						$.each(data.result.files, function (index, file) {
							toastr.info(file.name);
						});
					}
				})  */
			},
			methods: {
				setEmail: function() {
					// 校验email数据
					checkPattern.checkEmail(this.email, "输入的邮箱格式不对！");
					store.commit("updateEmail", this.email);
				},
				setPassword: function() {
					// 校验passwrod数据
					checkLength.minLength(this.password, 6, "输入的密码长度小于6位！");
					store.commit("updatePassword", this.password);
				},
				setUsername: function() {
					// 校验username数据
					checkNull.isNotEmpty(this.username, "输入的用户名不能为空！");
					store.commit("updateUsername", this.username);
				},
				registerPre: function() {
					checkPattern.checkEmail(this.email, "输入的邮箱格式不对！");
					checkLength.minLength(this.password, 6, "输入的密码长度小于6位！");
					checkNull.isNotEmpty(this.username, "输入的用户名不能为空！");
					console.log("email: " + this.email + ", password: " + this.password);
					router.push("/register/registerConfirm"); 
				},
				uploadFile: function() {
					var data = {
						name: "linux",
						address: "hubai"
					};
					fileupload.upload({
						action: "fileUploadAction/fileUpload.action",
						data: data,
						change: function(event) {
							console.log(event.total);
						},
						loadstart: function(event) {
							console.log("on load start!");
						},
						complete: function(event) {
							console.log("complete");
						},
						done: function(response) {
							console.log("hello world." + response);
						}
					});
				}
			}
		}
	}
</script>

<style>
	.login-btn {
		background-color: #FF0000;
	}
	.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}
</style>